<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>变形转换</title>
    <link rel="stylesheet" href="./css/transform.css">
    
</head>
<body>
    <h2>translate</h2>
    <p>before box</p>
    <div class="box b1"></div>
    <p>after box</p>
    <!-- 1.translate可以用在元素已经使用了绝对定位或者相对定位，可以实现叠加 -->
    <!-- 2.translate元素位移以后不会脱离文档流，还会占据之前的位置 -->
    <h2>rotate</h2>
    <div class="box b2"></div>
    <h2>scale</h2>
    <!-- 元素变大或者缩小所占据的文档流不变 -->
    <div class="box b3">b3</div>
    <div class="box b3">b3</div>
    <div class="box b3">b3</div>
    <h2>transform-origin</h2>
    <div class="box b4 r1">中心旋转</div>
    <div class="box b4 r2">左上角为中心旋转</div>
    <div class="box b4 r3">右上角为中心旋转</div>

</body>
</html>